<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<meta content="yes" name="apple-mobile-web-app-capable">
	<meta content="yes" name="apple-touch-fullscreen">
	<meta content="telephone=no,email=no" name="format-detection">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<!--防止css、js资源缓存-->
	<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
	<meta http-equiv="Pragma" content="no-cache" />
	<meta http-equiv="Expires" content="0" />
	<title>电子围栏</title>


	<link rel="stylesheet" href="asserts/resource/mui/css/mui.min.css" />
	<link rel="stylesheet" href="asserts/resource/css/common.css"/>

	<link rel="stylesheet" href="asserts/resource/css/css.css"/>
	<script type="text/javascript" src="asserts/resource/js/jquery.min.js"></script>
	<script type="text/javascript" src="asserts/resource/mui/js/mui.min.js"></script>
	<script type="text/javascript" src="asserts/resource/js/flexible_C.js" ></script>
</head>
<body id="AreaEdit">
<div id="pullrefresh" class="mui-content mui-scroll-wrapper">
	<div class="mui-scroll">
		<!--数据列表-->
		<ul id="area-container" class="mui-table-view mui-table-view-chevron">

		</ul>
	</div>
</div>
<div class="addcircle" onclick="addArea()"><i></i></div>
<script>
    var page = 0, //分页码
        pageSzie=8;//每页显示个数

    //滚动初始化
    mui('.mui-scroll-wrapper').scroll({
        scrollY: true, //是否竖向滚动
        scrollX: false, //是否横向滚动
        startX: 0, //初始化时滚动至x
        startY: 0, //初始化时滚动至y
        indicators: true, //是否显示滚动条
        deceleration:0.0006, //阻尼系数,系数越小滑动越灵敏
        bounce: true //是否启用回弹
    });
    mui.init({
        gestureConfig:{
            tap:true,
			hold:true,
            longtap: true //启用长按事件监控
        },
        pullRefresh : {
            container:'#pullrefresh',//待刷新区域标识，querySelector能定位的css选择器均可，比如：id、.class等
            up : {
                height:50,//可选.默认50.触发上拉加载拖动距离
                auto:true,//可选,默认false.自动上拉加载一次
                contentrefresh : "正在加载...",//可选，正在加载状态时，上拉加载控件上显示的标题内容
                contentnomore:'没有更多数据了,可点击右下角添加',//可选，请求完毕若没有更多数据时显示的提醒内容；
                callback : function() {
                    var self = this; // 这里的this == mui('#refreshContainer').pullRefresh()
                    // 加载更多的内容
                    page++;
                    getData(page,pageSzie,this);
                }  //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
            }
        }
    });

    (function($) {
        var btnArray = ['确认', '取消'];
        //删除按钮事件
        $('#area-container').on('tap', '.mui-icon-trash', function(event) {
            var li = this.parentNode.parentNode;
            var areaId =this.parentNode.parentNode.querySelector('#area-id').innerHTML;
            mui.confirm('确认删除该条记录？', '系统信息', btnArray, function(e) {
                if (e.index == 0) {
                    deleterecord(areaId,li)
                } else {
                    $.swipeoutClose(li);

                }
            });
        });

        //新增电子围栏
        function addArea() {
            localStorage.AreaObj = null;
            window.location.href = 'AreaEditMap.html'
        }

        //编辑按钮事件
        $('#area-container').on('tap', '.mui-icon-compose', function(event) {
            var li = this.parentNode.parentNode;
            editArea(li);
        });

        //单击列表事件
        $('#area-container').on('tap', '.mui-table-view-cell', function(event) {
			var _this = this;
			var child = this.childNodes;
            child[1].className += ' mui-active';
            setTimeout(function(){
                child[1].className = 'mui-slider-handle';
                editArea(_this);
			},500)
        });


        //长按删除事件
        $('#area-container').on('longtap', '.mui-table-view-cell', function(event) {
            var li = this;
            var areaId =this.querySelector('#area-id').innerHTML;
            mui.confirm('确认删除该条记录？', '系统信息', btnArray, function(e) {
                if (e.index == 0) {
                    deleterecord(areaId,li)
                    //li.parentNode.removeChild(li);
                } else {
                    $.swipeoutClose(li);

                }
            });
        });

    })(mui);

    //新增电子围栏
    function addArea() {
        localStorage.AreaObj = null;
        window.location.href = 'AreaEditMap.html'
    }

    //编辑电子围栏
    function editArea(_this) {
        var areaId,areaName,radui,editTime,lngR,latR;
        var AreaObj={},Objarea;
        areaId =_this.querySelector('#area-id').innerHTML;

        areaName = _this.querySelector('#area-name').innerHTML;

        radui = _this.querySelector('#area-radius').innerHTML;

        editTime =  _this.querySelector('#edit-time').innerHTML;

        lngR = _this.querySelector('#area-longitude').innerHTML;

        latR =_this.querySelector('#area-latitude').innerHTML;

        AreaObj.dataId = areaId;
        AreaObj.areaName = areaName;
        AreaObj.radui = radui;
        AreaObj.editTime = editTime;
        AreaObj.lngR = lngR;
        AreaObj.latR = latR;
        Objarea = JSON.stringify(AreaObj);
        localStorage.AreaObj = Objarea;
        window.location.href = 'AreaEditMap.html';
    }


    /*删除*/
    function deleterecord(areaId,li){

        $.ajax({
            type:"get",
            contentType:"application/json;charset=UTF-8",
            url:"/eleFence/deletFence",
            async:true,
            data:{
                "elefenceId" : areaId
            },
            //dataType:'json',
            success:function(data){
                if(data.status == 1){
                    li.parentNode.removeChild(li);

                }
            },
            error:function(){
                layerMsg("网络异常!",2);
            }
        });
    }

    /*查询*/
    function getData(pageNum,pageSize,self) {
        $.ajax({
            type:"POST",
            url:"/eleFence/selectFence",
            async:true,
            data:{"pageNum":pageNum,"pageSize":pageSize},
            dataType:'json',
            success:function(res){
                var recordStart='<li class="mui-table-view-cell">' +
                    '<div class="mui-slider-right mui-disabled">' +
                    '<a class="mui-btn mui-icon mui-icon-compose"></a>' +
                    '<a class="mui-btn mui-btn-red mui-icon mui-icon-trash"></a>' +
                    '</div>' +
                    '<div class="mui-slider-handle">' +
                    '<div class="mui-table-cell">';
                var recordHtml='';
                if(res.status == 1){
                    var rows = res.data.data;
                    var dataCount=rows.length;
                    if(dataCount > 0){
                        for (var i in rows){
                            var row = rows[i];
                            recordHtml+=recordStart;
                            recordHtml +='<span id="area-id" style="display: none">'+row.elefenceId+'</span>' +
                                '<span id="area-longitude" style="display: none">'+row.longitudeShow+'</span>'+
                                '<span id="area-latitude" style="display: none">'+row.latitudeShow+'</span>'+
                                '<h3 id="area-name">'+row.elefenceName+'</h3><p class="leftInfo"><span>半径:<a id="area-radius">'+row.radius+'</a></span>';
                            if(row.updateTime){
                                recordHtml +="<span id='edit-time'>修改时间:<a>" + FormatDate(row.updateTime) +"</a></span>";
                            }else {
                                recordHtml +="<span id='edit-time'>创建时间:<a>" + FormatDate(row.createTime) +"</a></span>";
                            }
                            recordHtml +="</p></div></div></li>";
                        }
                        self.endPullupToRefresh(false);
                    }else{
                        self.endPullupToRefresh(true);
                    }
                    $("#area-container").append(recordHtml);
                }

            },
            error:function(){
                mui.toast("网络异常!");
            }
        });
    }
    //时间转换
    function FormatDate (strTime) {
        var date = new Date(strTime);
        var month=date.getMonth()<10?'0'+(date.getMonth()+1):(date.getMonth()+1);
        var day=date.getDate()<10?'0'+date.getDate():date.getDate();
        var hour=date.getHours()<10?'0'+date.getHours():date.getHours();
        var minute=date.getMinutes()<10?'0'+date.getMinutes():date.getMinutes();
        var second=date.getSeconds()<10?'0'+date.getSeconds():date.getSeconds();
        return date.getFullYear()+"-"+month+"-"+day+' '+ hour + ':' + minute + ':' + second;
    }
</script>
</body>

</html>